import React,{useEffect} from 'react'
import {useDispatch,useSelector} from 'react-redux';
import {Stack,Text} from '@fluentui/react'
import {fetchTasks, fetchUsers} from './actions';
import TaskList from './TaskList';
import TaskForm from './TaskForm';

function TaskPage(){
    const dispatch = useDispatch();

    useEffect(()=>{
        dispatch(fetchUsers());
        dispatch(fetchTasks());
    },[dispatch]);

    return (
        <Stack tokens={{childrenGap:10}}>
            <Text variant="xxLarge">Tasks Management</Text>
            <TaskForm />
            <TaskList />
        </Stack>
    )
}

export default TaskPage